<script>
import * as echarts from 'echarts'
import { nanoid } from 'nanoid'
import ADLayer from '@/assets/js/ol-echarts'

export default {
  name: 'ol-echarts',
  inject: ['VMap'],
  render (createElement, context) {
    return null
  },
  props: {
    layerId: {
      type: String,
      default () {
        return `draw-layer-${nanoid()}`
      }
    },
    options: {
      type: Object
    },
    mapViewChangeEvent: {
      type: Function
    },
    lazyConfig:{
      type: Object,
      default: () => { }
    },
  },
  data () {
    return {
      layer: null
    }
  },
  computed: {
    map () {
      return this.VMap.map
    },
    map3d () {
      return this.VMap.map3d
    }
  },
  methods: {
    init () {
      const oe = new ADLayer({
        ecOptions:this.options,
        map:this.map,
        echarts,
        lazyConfig:this.lazyConfig,
        mapViewChangeEvent:this.mapViewChangeEvent
      })
      oe.render(() => {
        this.$nextTick(() => {
          this.layer = oe
          this.$emit('load', oe)
          this.layer._ec.on('click', (param) => {
            this.$emit('click', param)
          })
        })
      })
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.layer && this.layer.clear()
  }
}
</script>

<style scoped>

</style>
